<template>
  <div class="user-login">
    <!-- 导航栏 -->
    <van-nav-bar title="登录"></van-nav-bar>
    <van-cell-group>
      <validationObserver ref="loginFormRef">
        <ValidationProvider rules="required|phone" name="手机号" v-slot="{ errors }">
          <van-field
            v-model="loginForm.mobile"
            type="tel"
            label="手机号"
            placeholder="请输入手机号码"
            required
            clearable
            :error-message="errors[0]"
          />
        </ValidationProvider>
        <ValidationProvider rules="required" name="验证码" v-slot="{ errors }">
          <van-field
            v-model="loginForm.code"
            type="password"
            label="验证码"
            placeholder="请输入密码"
            required
            clearable
            :error-message="errors[0]"
          >
            <van-button slot="button" size="small" type="primary">发送验证码</van-button>
          </van-field>
        </ValidationProvider>
      </validationObserver>
    </van-cell-group>
    <div class="login-btn">
      <van-button
        type="info"
        size="small"
        @click="login()"
        round
        block
        :loading="isLogin"
        loading-text="登录中..."
      >登录</van-button>
    </div>
  </div>
</template>

<script>
// 导入校验组件
import { ValidationProvider, ValidationObserver } from "vee-validate";
// 导入账号校验的api函数
import { apiUserLogin } from "@/api/user.js";
export default {
  name: "user-login",
  // 组件注册
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      isLogin: false, // 按钮是否处于加载中
      // 登录表单数据对象
      loginForm: {
        mobile: "13911111111", // 手机号
        code: "246810" // 验证码
      }
    };
  },
  methods: {
    async login() {
      // 对全部表单域项目进项校验
      const rst = await this.$refs.loginFormRef.validate();
      if (!rst) {
        // 校验失败，停止后续代码执行
        return false;
      }
      // 按钮处于加载中
      this.isLogin = true;
      // apiUserLogin函数执行有可能成功、也有可能失败，请try、catch判断使用
      try {
        // 校验账号有效性
        const result = await apiUserLogin(this.loginForm);
        this.$store.commit('updateUser',result)
      } catch (err) {
        // 回复按钮加载中状态
        this.isLogin = false;
        return this.$toast.fail("用户名或密码错误" + err);
      }
      // 回复按钮加载中状态
      this.isLogin = false;
      this.$toast.success("登录成功");
      this.$router.push("/home"); // 项目首页面
    }
  }
};
</script>

<style scoped lang='less'>
// 登录按钮样式
.login-btn {
  margin: 40px;
}
</style>